import { Button, Form, Input, message, Popconfirm, Table } from 'antd';
import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons'
import { Modal } from 'antd'
import { useRequest } from 'ahooks';
import { addUserApi, deleteUserApi, getUserListApi } from 'services/api';
const formLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
}
const UserManage = () => {
    const [visible, setVisible] = useState(false)
    const [inEditUser, setInEditUser] = useState(null)
    const [form] = Form.useForm()
    const colums = [
        {
            title: '序号',
            dataIndex: 'index'
        },
        {
            title: '用户名',
            dataIndex: 'login_name'
        },
        {
            title: '备注',
            dataIndex: 'desc'
        },
        {
            title: '操作',
            render: (user: any) => <div>
                <Popconfirm
                    title="确定删除该用户?"
                    onConfirm={() => confirmDelete(user)}
                    disabled={user.login_name === 'super'}
                >
                    <Button disabled={user.login_name === 'super'} type="primary">删除</Button>
                </Popconfirm>
                
            </div>
        }
    ]
    const addUserClick = () => {
        setVisible(true)
    }
    const editUser = (user: any) => {
        setVisible(true)
        setInEditUser(user)
    }
    const okClick = async () => {
        const data = await form.validateFields()
        await addUserApi({ ...data })
        setVisible(false)
        refresh()
    }
    const cancelClick = () => {
        setVisible(false)
        form.resetFields()
    }
    const confirmDelete = async (user: any) => {
        console.log(user)
        await deleteUserApi({ login_name: user.login_name })
        message.success('删除成功')
        refresh()
    }
    const { data: userList, refresh } = useRequest(getUserListApi, {
        formatResult(res) {
            return res.map((user: any, index: number) => ({
                index: index + 1,
                ...user
            }))
        }
    })
    return (
        <div className="user-manage">
            <div style={{ padding: 10 }}>
                <Button icon={<PlusOutlined />} onClick={addUserClick}>添加用户</Button>
            </div>
            <Table key="login_name" columns={colums} dataSource={userList} pagination={false} ></Table>
            <Modal
                visible={visible}
                title={inEditUser ? '编辑用户' : '添加用户'}
                onOk={okClick}
                onCancel={cancelClick}
            >
                <Form form={form} {...formLayout}>
                    <Form.Item label="用户名" name="login_name" rules={[{ message: '请输入用户名', required: true }]} >
                        <Input placeholder="请输入用户名" allowClear />
                    </Form.Item>
                    <Form.Item label="密码" name="login_pass" rules={[{ message: '请输入密码', required: true }]}>
                        <Input placeholder="请输入密码" allowClear />
                    </Form.Item>
                    <Form.Item label="备注" name="desc">
                        <Input placeholder="请输入备注" allowClear />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
export default UserManage